<!DOCTYPE html>
<html>
<head>@include("/include/_header.html", {'title':'上传下载'}){}
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">本地上传下载</div>
					<div class="layui-card-body">

						<div class="layui-form" wid100 lay-filter="">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>常规使用：普通图片上传</legend>
							</fieldset>

							<div class="layui-upload">
								<button type="button" class="layui-btn" id="test1">上传图片</button>
								<input type="hidden" id="localKey">
								<button type="button" class="layui-btn" id="test22">下载图片</button>
								<div class="layui-upload-list">
									<img class="layui-upload-img" id="demo1">
									<p id="demoText"></p>
								</div>
							</div>

							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>上传多张图片</legend>
							</fieldset>

							<div class="layui-upload">
								<button type="button" class="layui-btn" id="test2">多图片上传</button>
								<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
									预览图：
									<div class="layui-upload-list" id="demo2"></div>
								</blockquote>
							</div>

							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>指定允许上传的文件类型</legend>
							</fieldset>

							<button type="button" class="layui-btn" id="test3">
								<i class="layui-icon"></i>上传文件
							</button>
							<button type="button" class="layui-btn layui-btn-primary" id="test4">
								<i class="layui-icon"></i>只允许压缩文件
							</button>
							<button type="button" class="layui-btn" id="test5">
								<i class="layui-icon"></i>上传视频
							</button>
							<button type="button" class="layui-btn" id="test6">
								<i class="layui-icon"></i>上传音频
							</button>
							
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>设定文件大小限制</legend>
							</fieldset>

							<button type="button" class="layui-btn layui-btn-danger" id="test7">
								<i class="layui-icon"></i>上传图片
							</button>
							<div class="layui-inline layui-word-aux">这里以限制 60KB 为例</div>

							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>同时绑定多个元素，并将属性设定在元素上</legend>
							</fieldset>

							<button class="layui-btn demoMore" lay-data="{url: '${ctxPath}/func/upload/localupload'}">上传A</button>
							<button class="layui-btn demoMore" lay-data="{url: '${ctxPath}/func/upload/localupload', size:5}">上传B</button>
							<button class="layui-btn demoMore" lay-data="{url: '${ctxPath}/func/upload/localupload', accept: 'file',size:10}">上传C</button>

							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>选完文件后不自动上传</legend>
							</fieldset>

							<div class="layui-upload">
								<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
								<button type="button" class="layui-btn" id="test9">开始上传</button>
							</div>
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>拖拽上传</legend>
							</fieldset>

							<div class="layui-upload-drag" id="test10">
								<i class="layui-icon"></i>
								<p>点击上传，或将文件拖拽到此处</p>
							</div>

							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>高级应用：制作一个多文件列表</legend>
							</fieldset>

							<div class="layui-upload">
								<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
								<div class="layui-upload-list">
									<table class="layui-table">
										<thead>
											<tr>
												<th>文件名</th>
												<th>大小</th>
												<th>状态</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody id="demoList"></tbody>
									</table>
								</div>
								<button type="button" class="layui-btn" id="testListAction">开始上传</button>
							</div>

							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>绑定原始文件域</legend>
							</fieldset>

							<input type="file" name="file" id="test20">
						</div>
					</div>
				</div>
			</div>
			
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">云服务器上传下载</div>
					<div class="layui-card-body">

						<div class="layui-form" wid100 lay-filter="">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend>腾讯云上传</legend>
							</fieldset>
							<div class="layui-form-item">
								<input type="hidden" id="qCloudKey">
								<button type="button" class="layui-btn" id="test21">
									<i class="layui-icon"></i>上传文件
								</button>
								<button type="button" class="layui-btn layui-btn-primary" id="downloadBtn">
									腾讯云文件下载
								</button>
							</div>
							
							<div class="layui-form-item">
								<blockquote class="layui-elem-quote">
									腾讯云对象存储文档请参考：<br> <a href="https://cloud.tencent.com/document/product/436/10199" target="_blank">https://cloud.tencent.com/document/product/436/10199</a>
								</blockquote>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			
		</div>
	</div>

	@include("/include/_container.html", {'js':'/assets/func/upload/upload.js'}){}
</body>